<template>
  <div class='container'>
    <el-card class="box-card">
        <el-row>
          <el-button style="float: right" type="success" size="small"  icon="el-icon-edit" @click="$router.push('/questions/new')">新增试题</el-button>
        </el-row>
        <el-form ref="requestParameters" :model="form" label-width="80px" clearable>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="学科" prop="subjectID">
                <el-select v-model="form.subjectID" placeholder="请选择" size="small" @change="getsubjectDetail">
                  <el-option :label="item.subjectName" :value="item.id" v-for="item in subjectList" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录" prop="catalogID">
                <el-select v-model="form.catalogID" placeholder="请选择" size="small" @change="getsubjecttags">
                   <el-option :label="item.label" :value="item.value" v-for="(item, index) in subjectDetail" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select v-model="form.tags" placeholder="请选择" size="small">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in subjectTags" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字" prop="keyword">
                <el-input v-model="form.keyword" placeholder="根据题干搜索" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="试题类型" prop="questionType">
                <el-select v-model="form.questionType" placeholder="请选择" size="small">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in questionType" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度" prop="difficulty">
                <el-select v-model="form.difficulty" placeholder="请选择" size="small">
                  <el-option :label="item.label" :value="item.value" v-for="(item, index) in difficulty" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向" prop="direction">
                <el-select v-model="form.direction" placeholder="请选择" size="small">
                  <el-option :label="item" :value="index" v-for="(item, index) in direction" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人" prop="creatorID">
                <el-select v-model="form.creatorID" placeholder="请选择" size="small">
                  <el-option :label="item.username" :value="item.id" v-for="(item, index) in userList" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="form.remarks" size="small"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="form.shortName" size="small"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-row>
                  <el-col :span="11" style="margin-right: 2%;">
                    <el-form-item prop="city">
                      <el-select v-model="form.city" placeholder="请选择" size="small" @change="getareas(form.city)">
                        <el-option :label="item" :value="item" v-for="(item, index) in citys" :key="index"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item prop="province">
                      <el-select v-model="form.province" placeholder="请选择" size="small">
                        <el-option :label="item" value="index" v-for="(item, index) in areas" :key="index"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <div style="margin-left: 139px;">
                <el-button size="mini" @click="resetForm">清除</el-button>
                <el-button type="primary" size="mini" @click="search">搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
          <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
            <el-tab-pane label="全部" name="0">
              <el-alert type="info" show-icon>
                <span slot="title">数据一共{{title}}条</span>
              </el-alert>
              <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="150"></el-table-column>
              <el-table-column prop="subject" label="学科" width="80"></el-table-column>
              <el-table-column prop="catalog" label="目录" width="80"></el-table-column>
              <el-table-column label="题型" width="100">
                <template slot-scope="scoped">
                  <span v-if="scoped.row.questionType === '1'">单选</span>
                  <span v-else-if="scoped.row.questionType === '2'">多选</span>
                  <span v-else>简答</span>
                </template>
              </el-table-column>
              <el-table-column label="题干" width="200">
                <template slot-scope="scoped">
                  <span v-html="scoped.row.question"></span>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="200">
                <template slot-scope="scoped">
                  <span>{{scoped.row.addDate | parseTime}}</span>
                </template>
              </el-table-column>
              <el-table-column label="难度" width="100">
                <template slot-scope="scoped">
                  <span v-if="scoped.row.difficulty === 1">简单</span>
                  <span v-else-if="scoped.row.difficulty === 2">一般</span>
                  <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="100"></el-table-column>
              <el-table-column label="审核状态" width="100">
                 <template slot-scope="scoped">
                  <span v-if="scoped.row.chkState === 1">已审核</span>
                  <span v-else-if="scoped.row.chkState === 2">已拒绝</span>
                  <span v-else>待审核</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="150"></el-table-column>
              <el-table-column prop="chkUser" label="审核人" width="100"></el-table-column>
              <el-table-column label="发布状态">
                <template slot-scope="scoped">
                  <span v-if="scoped.row.publishState === 1">已发布</span>
                  <span v-else>已下架</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="210">
                <template slot-scope="scoped">
                  <el-button type="text" @click="view(scoped.row.id)">预览</el-button>
                  <el-button type="text" @click="chkState(scoped.row.id)" :disabled="scoped.row.chkState === 1">审核</el-button>
                  <el-button type="text" :disabled="scoped.row.publishState === 1" @click="edit(scoped.row.id)">修改</el-button>
                  <el-button type="text" @click="publishState(scoped.row.id, scoped.row.publishState)">{{ scoped.row.publishState === 1 ? '下架': '上架' }}</el-button>
                  <el-button type="text" @click="deleteTable(scoped.row.id)" :disabled="scoped.row.publishState === 1">删除</el-button>
                </template>
              </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="待审核" name="1">
              <el-alert type="info" show-icon>
                <span slot="title">数据一共{{title}}条</span>
              </el-alert>
              <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="150"></el-table-column>
              <el-table-column prop="subject" label="学科" width="80"></el-table-column>
              <el-table-column prop="catalog" label="目录" width="80"></el-table-column>
              <el-table-column label="题型" width="100">
                <template slot-scope="scoped">
                  <span v-if="scoped.row.questionType === '1'">单选</span>
                  <span v-else-if="scoped.row.questionType === '2'">多选</span>
                  <span v-else>简答</span>
                </template>
              </el-table-column>
              <el-table-column label="题干" width="200">
                <template slot-scope="scoped">
                  <span v-html="scoped.row.question"></span>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="200">
                <template slot-scope="scoped">
                  <span>{{scoped.row.addDate | parseTime}}</span>
                </template>
              </el-table-column>
              <el-table-column label="难度" width="100">
                <template slot-scope="scoped">
                  <span v-if="scoped.row.difficulty === 1">简单</span>
                  <span v-else-if="scoped.row.difficulty === 2">一般</span>
                  <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="100"></el-table-column>
              <el-table-column label="审核状态" width="100">
                 <template slot-scope="scoped">
                  <span v-if="scoped.row.chkState === 1">已审核</span>
                  <span v-else-if="scoped.row.chkState === 2">已拒绝</span>
                  <span v-else>待审核</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="150"></el-table-column>
              <el-table-column prop="chkUser" label="审核人" width="100"></el-table-column>
              <el-table-column label="发布状态">
                <template slot-scope="scoped">
                  <span v-if="scoped.row.publishState === 1">已发布</span>
                  <span v-else>已下架</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="210">
                <template slot-scope="scoped">
                  <el-button type="text" @click="view(scoped.row.id)">预览</el-button>
                  <el-button type="text" @click="chkState(scoped.row.id)" :disabled="scoped.row.chkState === 1">审核</el-button>
                  <el-button type="text" :disabled="scoped.row.publishState === 1" @click="edit(scoped.row.id)">修改</el-button>
                  <el-button type="text" @click="publishState(scoped.row.id, scoped.row.publishState)">{{ scoped.row.publishState === 1 ? '下架': '上架' }}</el-button>
                  <el-button type="text" @click="deleteTable(scoped.row.id)" :disabled="scoped.row.publishState === 1">删除</el-button>
                </template>
              </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="已审核" name="2">
              <el-alert type="info" show-icon>
                <span slot="title">数据一共{{title}}条</span>
              </el-alert>
              <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="150"></el-table-column>
              <el-table-column prop="subject" label="学科" width="80"></el-table-column>
              <el-table-column prop="catalog" label="目录" width="80"></el-table-column>
              <el-table-column label="题型" width="100">
                <template slot-scope="scoped">
                  <span v-if="scoped.row.questionType === '1'">单选</span>
                  <span v-else-if="scoped.row.questionType === '2'">多选</span>
                  <span v-else>简答</span>
                </template>
              </el-table-column>
              <el-table-column label="题干" width="200">
                <template slot-scope="scoped">
                  <span v-html="scoped.row.question"></span>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="200">
                <template slot-scope="scoped">
                  <span>{{scoped.row.addDate | parseTime}}</span>
                </template>
              </el-table-column>
              <el-table-column label="难度" width="100">
                <template slot-scope="scoped">
                  <span v-if="scoped.row.difficulty === 1">简单</span>
                  <span v-else-if="scoped.row.difficulty === 2">一般</span>
                  <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="100"></el-table-column>
              <el-table-column label="审核状态" width="100">
                 <template slot-scope="scoped">
                  <span v-if="scoped.row.chkState === 1">已审核</span>
                  <span v-else-if="scoped.row.chkState === 2">已拒绝</span>
                  <span v-else>待审核</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="150"></el-table-column>
              <el-table-column prop="chkUser" label="审核人" width="100"></el-table-column>
              <el-table-column label="发布状态">
                <template slot-scope="scoped">
                  <span v-if="scoped.row.publishState === 1">已发布</span>
                  <span v-else>已下架</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="210">
                <template slot-scope="scoped">
                  <el-button type="text" @click="view(scoped.row.id)">预览</el-button>
                  <el-button type="text" @click="chkState(scoped.row.id)" :disabled="scoped.row.chkState === 1">审核</el-button>
                  <el-button type="text" :disabled="scoped.row.publishState === 1" @click="edit(scoped.row.id)">修改</el-button>
                  <el-button type="text" @click="publishState(scoped.row.id, scoped.row.publishState)">{{ scoped.row.publishState === 1 ? '下架': '上架' }}</el-button>
                  <el-button type="text" @click="deleteTable(scoped.row.id)" :disabled="scoped.row.publishState === 1">删除</el-button>
                </template>
              </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="已拒绝" name="3">
              <el-alert type="info" show-icon>
                <span slot="title">数据一共{{title}}条</span>
              </el-alert>
              <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="number" label="试题编号" width="150"></el-table-column>
              <el-table-column prop="subject" label="学科" width="80"></el-table-column>
              <el-table-column prop="catalog" label="目录" width="80"></el-table-column>
              <el-table-column label="题型" width="100">
                <template slot-scope="scoped">
                  <span v-if="scoped.row.questionType === '1'">单选</span>
                  <span v-else-if="scoped.row.questionType === '2'">多选</span>
                  <span v-else>简答</span>
                </template>
              </el-table-column>
              <el-table-column label="题干" width="200">
                <template slot-scope="scoped">
                  <span v-html="scoped.row.question"></span>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="200">
                <template slot-scope="scoped">
                  <span>{{scoped.row.addDate | parseTime}}</span>
                </template>
              </el-table-column>
              <el-table-column label="难度" width="100">
                <template slot-scope="scoped">
                  <span v-if="scoped.row.difficulty === 1">简单</span>
                  <span v-else-if="scoped.row.difficulty === 2">一般</span>
                  <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="100"></el-table-column>
              <el-table-column label="审核状态" width="100">
                 <template slot-scope="scoped">
                  <span v-if="scoped.row.chkState === 1">已审核</span>
                  <span v-else-if="scoped.row.chkState === 2">已拒绝</span>
                  <span v-else>待审核</span>
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="150"></el-table-column>
              <el-table-column prop="chkUser" label="审核人" width="100"></el-table-column>
              <el-table-column label="发布状态">
                <template slot-scope="scoped">
                  <span v-if="scoped.row.publishState === 1">已发布</span>
                  <span v-else>已下架</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="210">
                <template slot-scope="scoped">
                  <el-button type="text" @click="view(scoped.row.id)">预览</el-button>
                  <el-button type="text" @click="chkState(scoped.row.id)" :disabled="scoped.row.chkState === 1">审核</el-button>
                  <el-button type="text" :disabled="scoped.row.publishState === 1" @click="edit(scoped.row.id)">修改</el-button>
                  <el-button type="text" @click="publishState(scoped.row.id, scoped.row.publishState)">{{ scoped.row.publishState === 1 ? '下架': '上架' }}</el-button>
                  <el-button type="text" @click="deleteTable(scoped.row.id)" :disabled="scoped.row.publishState === 1">删除</el-button>
                </template>
              </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <el-pagination
            style="float: right;"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="query.pagesize"
            :page-count="Allpages"
            layout=" prev, pager, next, sizes, jumper"
            :total="title">
          </el-pagination>
    </el-card>
    <!-- 审核 -->
    <question-check :chkStateVisible.sync = "chkStateVisible" :radio="radio" @cofirm="onconfirm"></question-check>
    <!-- /审核 -->
    <!-- 预览 -->
    <question-preview :viewVisible.sync="viewVisible" :viewInfo="viewInfo"/>
    <!-- /预览 -->
  </div>
</template>

<script>
import { choice, choiceAdd, choicePublish, choiceCheck, detail } from '@/api/hmmm/questions'
import { list } from '@/api/hmmm/subjects'
import { simple } from '@/api/hmmm/directorys'
import { createAPI } from '@/utils/request'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import questionCheck from '../components/questions-check'
import questionPreview from '../components/questions-preview'
export default {
  name: 'choiceIndex',
  data () {
    return {
      form: {
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        // 题型
        questionType: '',
        // 难度
        difficulty: '',
        // 方向
        direction: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        city: '',
        province: '',
        // 录入人
        creatorID: '',
        chkRemarks: ''
      },
      activeName: '0',
      tableData: [],
      title: 0,
      Allpages: 0,
      query: {
        page: 1,
        pagesize: 10,
        chkState: null
      },
      // 学科列表
      subjectList: [],
      // 目录列表
      subjectDetail: [],
      // 标签列表
      subjectTags: [],
      difficulty,
      questionType,
      direction,
      userList: [],
      // 城市
      citys: [],
      areas: [],
      chkStateVisible: false,
      id: '',
      viewVisible: false,
      viewInfo: {},
      radio: '1'
    }
  },
  components: {
    questionCheck,
    questionPreview
  },
  methods: {
    async getchoice (query) {
      try {
        const { data } = await choice(query)
        console.log(data)
        this.tableData = data.items
        this.title = data.counts
        this.page = data.page
        this.Allpages = data.pages
        this.pagesize = data.pagesize
        this.citys = provinces()
      } catch (err) {
        this.$message.error('获取精选题库数据列表失败')
      }
    },
    handleClick () {
      if (this.activeName) {
        this.query.chkState = this.activeName - 1
      }
      this.getchoice(this.query)
    },
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getchoice(this.query)
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.getchoice(this.query)
    },
    // 获取学科列表
    async getsubjectList () {
      try {
        const { data } = await list()
        console.log(data)
        this.subjectList = data.items
      } catch (err) {
        this.$message.error('获取学科列表失败')
      }
    },
    // 二级目录
    async getsubjectDetail () {
      if (this.form.subjectID) {
        try {
          const { data } = await simple(this.form.subjectID)
          console.log(data)
          this.subjectDetail = data
          this.getsubjecttags()
        } catch (err) {
          this.$message.error('获取目录列表失败')
        }
      }
    },
    // 标签
    async getsubjecttags () {
      try {
        const id = this.form.subjectid
        const tagsSimple = (data) => createAPI('/tags/simple', 'get', data)
        const { data } = await tagsSimple(id)
        this.subjectTags = data
      } catch (err) {
        this.$message.error('获取标签列表失败')
      }
    },
    // 获取用户列表
    async getUser () {
      try {
        const userlist = data => createAPI('/users/', 'get', data)
        const { data } = await userlist()
        console.log(data)
        this.userList = data.list
      } catch (err) {
        this.$message.error('获取用户列表失败')
      }
    },
    getareas (city) {
      console.log(city)
      const area = citys(city)
      console.log(area)
      this.areas = area
    },
    resetForm () {
      console.log(this.$refs.requestParameters)
      this.$refs.requestParameters.resetFields()
    },
    search () {
      console.log(this.form)
      this.getchoice(this.form)
    },
    deleteTable (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(id)
        try {
          const { data } = await choiceAdd({ id, choiceState: 0 })
          console.log(data)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getchoice(this.query)
        } catch (err) {
          this.$message.error('删除用户失败')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    publishState (id, state) {
      if (state) {
        this.$confirm('此操作将永久下架该题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          console.log(id)
          try {
            const { data } = await choicePublish({ id, publishState: 0 })
            console.log(data)
            this.$message({
              type: 'success',
              message: '下架成功!'
            })
            this.getchoice(this.query)
          } catch (err) {
            this.$message.error('删除用户失败')
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$confirm('此操作将永久上架该题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          console.log(id)
          try {
            const { data } = await choicePublish({ id, publishState: 1 })
            console.log(data)
            this.$message({
              type: 'success',
              message: '上架成功!'
            })
            this.getchoice(this.query)
          } catch (err) {
            this.$message.error('删除用户失败')
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    chkState (Id) {
      this.id = Id
      this.chkStateVisible = true
    },
    edit (id) {
      console.log(id)
      this.$router.push('/questions/new?id=' + id)
    },
    view (id) {
      this.viewVisible = true
      this.getviewlist(id)
    },
    async getviewlist (id) {
      try {
        const { data } = await detail({ id })
        console.log(data)
        this.viewInfo = data
      } catch (err) {
        this.$message('获取失败')
      }
    },
    async onconfirm (chkRemarks) {
      const chkState = parseInt(this.radio)
      console.log(chkState)
      try {
        const { data } = await choiceCheck({
          id: this.id,
          chkState,
          chkRemarks
        })
        console.log(data)
        this.chkRemarks = ''
        this.$message.success('审核成功')
      } catch (err) {
        this.$message.error('审核失败')
      }
      this.chkStateVisible = false
    }
  },
  created () {
    this.getchoice(this.query)
    this.getsubjectList()
    this.getUser()
  }
}
</script>

<style scoped lang='scss' rel="stylesheet/scss">
.container {
  .el-card {
    margin: 10px;
  }
  .el-button {
    margin-bottom: 20px;
  }
  .el-row {
    .el-col {
      .el-select {
        input {
          font-size: 10px;
        }
      }
    }
  }
  .el-table {
    margin-top: 20px;
  }
}
</style>
